<template>
	<div class="homebg">
      <div class="mp-ticket-container">
       <div class="mp-promote">
        <h3 class="mp-ticket-type mpf-border-bottom">去哪儿推荐</h3>
        <div class="mp-ticket-item mp-flexbox mp-border-top" v-for="item of list">
         <div class="mp-ticket-main mp-flexbox-layout">
          <div>
           <h6 class="mp-ticket-title mp-ellipsis2">{{item.tickeyname}}</h6>
           <ul class="mp-ticket-light">
            <span class="mp-ticket-desctag"><img class="mp-ticket-tagicon" src="https://img1.qunarzz.com/piao/fusion/1804/f0/39deb48037c83702.png" />19:00前可订今日,预订后1小时可用</span>
           </ul>
           <ul class="mp-ticket-labelcon">
            <span class="mp-ticket-label mp-border mp-label14">随时退2</span>
           </ul>
          </div>
         </div>
         <div class="mp-ticket-side mp-flexbox-layout">
          <a href="javascript:void(0)" class="mp-ticket-link" @click="booktickey(item.price,item.tickeyname)">
          <strong class="mp-ticket-sale mp-price">&yen;<em class="mp-price-num">{{item.price}}</em></strong><em class="mp-ticket-btn mp-promote-ablebtn">预订</em></a>
         </div>
        </div>
       </div>

       <div class="mpw-calendar-tabout mp-border-bottom">
        <div class="mp-border-bottom">
         <span class="mpw-calendar-tabitem" style="width: 34%;margin:0 8%;"
          v-on:click="boderbtmc();tickeydata();">门票</span>
         <span class="btmactiveboder"
         v-bind:class="{borderbutom:isBorderbutom}"></span>
         <span class="mpw-calendar-tabitem" style="width: 34%;margin:0 8%;"
          v-on:click="boderbtmc();onedaydata();">一日游</span>
        </div>
       </div>

       <div class="mp-ticket-group mp-border-bottom">
        <h3 class="mp-ticket-type mp-border-bottom"><span class="mp-ticketype-ticket"></span>景区门票</h3>
        <div class="mp-ticket-list mp-border-top mp-ticket-list-multi"
        v-bind:class="{minheight:isheight,maxheight:!isheight}">
<!-- 直接if索引值大于2不显示           -->
        <div class="mp-ticket-type-info mp-border-bottom" v-for="(item,index) in listtik" v-if="(index < listnum)">
            <h5 class="mp-ticket-type-name mp-ellipsis2">{{item.tickeyname}}</h5>
            <div class="mp-ticket-type-price mp-price">
                ¥<em class="mp-price-num">{{item.price}}</em><span class="mp-ticket-numword">起</span>
            </div>
          </div>
          <div class="mp-more-refresh mp-border-top" 
          v-on:click="spreadinfo">
            查看剩余报价
            <i class="iconfont" v-bind:class="{showicon:isShowicon}">&#xe61d;</i>
            <i class="iconfont" v-bind:class="{showicon:!isShowicon}">&#xe626;</i>
          </div>
         </div>
        </div>
       </div>
	</div>
</template>
<script>

export default{
	name: 'DetailListcontainer',
	props: {
		list: Array,
        listtik: Array
	},
    data () {
        return {    
            listnum: 2,
            isShowicon: true,
            isheight: true,
            isBorderbutom: false
        }
    },
    methods: {
        spreadinfo () {
            this.isShowicon = !this.isShowicon
            this.isheight = !this.isheight
            if (this.listnum === 2) {
               return this.listnum = Infinity 
            }else if (this.listnum === Infinity) {
               return this.listnum = 2
            } 
        },
        boderbtmc () {
            this.isBorderbutom = !this.isBorderbutom
        },
        onedaydata () {
            this.$emit('accpetoneday')
        },
        tickeydata () {
            this.$emit('accpetticky')
        },
        booktickey (msgp,msgn) {
            eventBus.$emit('acceptBook')
            eventBus.$emit('acceptprice',msgp)
            eventBus.$emit('acceptname',msgn)
        },
    },

}
</script>
<style lang="stylus" scoped>
  .homebg
    background-color:#f5f5f5
  .mp-more-refresh .showicon
    display:none
  .mp-ticket-list
    transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;  
    -webkit-transition: max-height 0.8s; 
    -o-transition: max-height 0.8s;   
  .minheight
    max-height:134px 
  .maxheight
    max-height:475px 
  .mp-border-bottom
    position:relative;
  .mp-border-bottom .borderbutom
    left:58%!important;
  .btmactiveboder
    width:34%;
    height:2px;
    background-color:#00afc7;
    position:absolute;
    left:8%;
    margin-top:46px;
    transition: left 0.4s;
    -moz-transition: left 0.4s;  
    -webkit-transition: left 0.4s; 
    -o-transition: left 0.4s;  
</style>